<!--请看prop-default的数据说明-->
<template>
  <div class="t-top-list"
       v-show="show">
    <c-row>
      <c-col :span="8"
             v-for="(item,index) in inputList"
             :key="index"
             v-show="num ? index <= num: index>=num">
        <div class="inputlist-item-component-wrap">
          <div class="label">{{item.label}}</div>
          <div class="input-content"
               v-if="item.type === '' || item.type === 'text'">
            <c-input v-model="prop[item.prop]"
                     :placeholder="item.placeholder || '请输入'"
                     :disabled="item.disabled"></c-input>
          </div>
          <div class="input-content item-content"
               v-else-if="item.type === 'checkbox'"
               style="height: 40px;line-height: 38px;">
            <c-checkbox v-model="prop[item.prop]"></c-checkbox>
          </div>
          <div class="input-content item-content"
               v-else-if="item.type === 'time'">
            <c-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                           :picker-options="item.pickerOptions || pickerOptions"
                           :default-time="['00:00:00', '23:59:59']"
                           v-model="prop[item.prop]"
                           type="daterange"
                           range-separator="至"
                           start-placeholder="开始日期"
                           end-placeholder="结束日期">
            </c-date-picker>
          </div>
          <div class="input-content item-content"
               v-else-if="item.type === 'timeSingle'">
            <c-date-picker value-format="yyyy-MM-dd"
                           v-model="prop[item.prop]"
                           type="date">
            </c-date-picker>
          </div>
          <div class="sel-content"
               v-else-if="item.type==='sel'">
            <c-select v-model="sel[item.prop]"
                      :placeholder="item.placeholder || '请选择'"
                      :disabled="item.disabled"
                      @change="getSelect(item)">
              <c-option v-for="(i,ind) in item.sels"
                        :key="ind"
                        :value="i[item.sel]">
              </c-option>
            </c-select>
          </div>
          <div class='sel-content'
               v-else-if="item.type==='multiple'">
            <c-select :placeholder="item.placeholder || '请选择'"
                      :disabled="item.disabled"
                      v-model="sel[item.prop]"
                      multiple
                      collapse-tags
                      @change="getSelect(item)">
              <c-option v-for="(i,ind) in item.sels"
                        :key="ind"
                        :value="i[item.sel]">
              </c-option>
            </c-select>
          </div>
          <div class="sel-content"
               v-else-if="item.type==='cascader'">
            <c-cascader expand-trigger="hover"
                        :options="item.sels"
                        v-model="prop[item.prop]"
                        @change="cascaderChange(item.prop, prop[item.prop])">
              <!-- <c-option v-for="(i,ind) in item.sels" :key="ind" :value="i[item.sel]"> </c-option> -->
            </c-cascader>
          </div>
        </div>
      </c-col>
      <c-col :span="8"
             v-if="inputList.length <= 2"
             style="float: right;">
        <div class="list-item">
          <div class="t-button-list"
               style="width:100%;">
            <div class="t-button-right">
              <c-button type="primary"
                        @click="search"><i class="el-icon-search"></i>查询</c-button>
              <c-button plain
                        @click="init"><i class="el-icon-refresh"></i>重置</c-button>
            </div>
          </div>
        </div>
      </c-col>
    </c-row>
    <c-row v-if="inputList.length > 2">
      <c-col :span="16">
        <div class="aaa"
             style="height: 32px">
          <slot></slot>
        </div>
      </c-col>
      <c-col :span="8">
        <div class="t-button-list">
          <div class="t-button-right">
            <c-button type="primary"
                      @click.stop="search"><i class="el-icon-search"></i>查询</c-button>
            <c-button @click.stop="init"><i class="el-icon-refresh"></i>重置</c-button>
            <div class="statusWord"
                 v-show="showC"
                 @click="setS"><span>{{num<=0? '收起':'展开'}}</span><i class="el-icon-arrow-down"
                 :class="num? 'up': 'down'"
                 ref="rota"></i></div>
          </div>
        </div>
      </c-col>
    </c-row>
  </div>
</template>

<script>
export default {
  name: '',
  data: () => {
    return {
      show: false,
      dataReset: false,
      num: 2,
      showC: true,
      pickerOptions: {
        shortcuts: [{
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [date, date])
          }
        }, {
          text: '最近7天',
          onClick (picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近30天',
          onClick (picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近60天',
          onClick (picker) {
            const start = new Date()
            const end = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 60)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      prop: {
      }, // 给父组件的值，父组件用来请求url
      sel: {} // 用來保存下拉框的v-model的值，防止v-model修改props
    }
  },
  props: {
    inputList: {
      type: Array,
      default: () => {
        return [
          {
            type: '', // sel:表示下拉框，空代表input输入框,time代表时间选择框，data代表日期选择框
            label: 'key', // input前边的字段显示
            prop: 'name', // prop: 用于请求接口的字段key
            sels: [
              { key: 1, text: 1 }
            ], // type为sel时候的下拉数据
            sel: 'key', // 当type为sel时候下拉数据应该取哪个key作为value
            disabled: false
          },
          {
            type: 'sel', // sel:表示下拉框，空代表input输入框
            label: 'key', // input前边的字段显示
            prop: 'selProp', // prop: 用于请求接口的字段key
            sels: [
              { key: 1, text: 1 },
              { key: 2, text: 2 }
            ], // type为sel时候的下拉数据
            value: '',
            sel: 'key', // 当type为sel时候下拉数据应该取哪个key作为value
            disabled: false
          },
          {
            type: '', // sel:表示下拉框，空代表input输入框
            label: 'key', // input前边的字段显示
            prop: 'name1', // prop: 用于请求接口的字段key
            sels: [
              { key: 1, text: 1 }
            ], // type为sel时候的下拉数据
            sel: 'key', // 当type为sel时候下拉数据应该取哪个key作为value
            disabled: false
          },
          {
            type: 'sel', // sel:表示下拉框，空代表input输入框
            label: 'key', // input前边的字段显示
            prop: 'selProp1', // prop: 用于请求接口的字段key
            sels: [
              { key: 1, text: 1 },
              { key: 2, text: 2 }
            ], // type为sel时候的下拉数据
            value: '',
            sel: 'key', // 当type为sel时候下拉数据应该取哪个key作为value
            disabled: false
          }
        ]
      }
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.formList()
        if (this.inputList.length <= 3) {
          this.showC = false
        }
      }
    }
  },
  methods: {
    cascaderChange (prop, data) {
      this.$emit('selected', { prop, data })
    },
    // 取到父组件需要的数据格式
    formList () {
      // console.log('筛选组件开始工作了')
      this.inputList.forEach((item) => {
        const value = item.value || ''
        this.$set(this.prop, item.prop, value)
        if (item.type === 'sel') {
          this.$set(this.sel, item.prop, item.value)
          if (item.value) {
            const opt = item.sels.find((nextItem) => {
              return nextItem[item.sel] === item.value
            })
            this.prop[item.prop] = opt[item.prop]
          }
        }
      })
    },
    // 获取select选中的值,并且给到父组件的数据格式中。
    getSelect (obj) {
      if (obj.type === 'sel') {
        obj.sels.forEach((item) => {
          if (item[obj.sel] === this.sel[obj.prop]) {
            this.prop[obj.prop] = item[obj.prop]
            this.$emit('getProp', item)
            if (typeof obj.onselect === 'string') this.$emit('selected', { method: obj.onselect, data: item })
          }
        })
      } else {
        const prop = obj.prop
        this.prop[prop] = []
        obj.sels.forEach((item) => {
          if (this.sel[prop].indexOf(item.text) !== -1) {
            this.prop[prop].push(item.leavel)
          }
        })
      }
    },
    // 查询事件-给父组件回调-
    search () {
      const result = this.dataReset
      this.$emit('inputsearch', this.prop, result)
      this.dataReset = false
    },
    reset () {
      Object.keys(this.prop).forEach((item) => {
        // this.prop[item] = this.prop[item] instanceof Array ? [] : ''
        this.prop[item] = ''
      })
      Object.keys(this.sel).forEach((item) => {
        this.sel[item] = ''
      })
      this.inputList.forEach(item => {
        if (item.type === 'cascader') {
          this.prop[item.prop] = []
        }
      })
      console.log('reset::', this.prop, this.sel)
      this.$emit('clearData')
    },
    // 重置筛选条件
    init () {
      this.dataReset = true
      this.reset()
      // this.search()
      // Object.keys(this.prop).forEach((item) => {
      //   this.prop[item] = ''
      // })
      // Object.keys(this.sel).forEach((item) => {
      //   this.sel[item] = ''
      // })
      // this.search()
      // this.$emit('clearData')
    },
    // 展开收起
    setS () {
      this.num = this.num ? 0 : 2
    }
  }
}
</script>
<style lang="scss">
.inputlist-item-component-wrap {
  .t-top-list .sel-content .el-input--suffix {
    width: 100%;
  }
  .t-top-list .el-date-editor {
    width: 100% !important;
  }

  .t-top-list .el-button {
    /* height: 32px !important; */
    /* width: 65px !important; */
    /* line-height: 32px !important; */
    padding: 10px 16px !important;
  }
  .el-input {
    width: 100% !important;
  }
}
</style>
<style lang="scss" scoped>
.inputlist-item-component-wrap {
  display: flex;
  margin-bottom: 22px;
  align-items: center;
  padding: 0 10px;

  .label {
    width: 80px;
    text-align: right;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    margin-right: 14px;
  }

  .sel-content {
    flex: 1;
    width: 100%;
    // max-width: 240px;
    .el-select {
      width: 100%;
      // max-width: 240px;
    }
  }

  .input-content {
    flex: 1;
    // width: 100%;
    // max-width: 240px;
  }
  .input-content,
  .item-content > .el-date-editor--daterange {
    // max-width: 240px !important;
    width: 100% !important;
  }
}
.t-button-list {
  // height: 32px;
  // max-width: 240px;
  // margin-left: 94px;

  .t-button-right {
    display: flex;
    box-sizing: border-box;
    padding-right: 10px;
    align-items: center;
    justify-content: flex-end;
    .statusWord {
      line-height: 1;
      margin-left: 10px;
      display: flex;
      color: #666;
      cursor: pointer;
      font-size: 14px;
      span {
        transition: all 0.4s;
      }
    }
  }
}
</style>
